<template>
    <div style="width: 100%;">
        <div style="height:600px;width: 100%;border: 1px black solid">
            <router-view></router-view>
        </div>
        <footer class="footer">
            <el-row>
                <el-col :span="8"><div class="col" @click="zhuyePage"><img :src="footerIcon.zhuye"></div></el-col>
                <el-col :span="8"><div class="col" @click="localPage"><img :src="footerIcon.local"></div></el-col>
                <el-col :span="8"><div class="col" @click="peoplePage"><img :src="footerIcon.people"></div></el-col>
            </el-row>
        </footer>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                footerIcon:{
                    zhuye:require("@/assets/appImage/zhuye.png"),
                    local:require("@/assets/appImage/local.png"),
                    people:require("@/assets/appImage/people.png"),
                }
            }
        },
        methods:{
            async zhuyePage(){
                this.$router.push("/app/zhuye");
            },
            async localPage(){
                this.$router.push("/app/local");
            },
            async peoplePage(){
                this.$router.push("/app/people");
            }
        }
    }
</script>

<style lang="less">
    .footer {
        position: fixed;
        width: 100%;
        z-index: 999;
        bottom: 0px;
        height: 50px;
        .col {
            height: 100px;
            text-align: center;
            cursor:pointer;
        }
    }

</style>